<article>
  <p>日期选择插件可以帮助用户更方便准确的选择日期和时间。</p>
  <p>在ZUI中包含的日期选择控件基于开源项目 <a href="http://www.malot.fr/bootstrap-datetimepicker/"
target="_blank">DateTime Picker</a> 定制开发。</p>
</article>

<section>
  <header><h3>日期选择</h3></header>
  <article>
    <div class="example">
      <input type="text" class="form-control form-date" placeholder=
      "选择或者输入一个日期：yyyy-MM-dd">
    </div>
  </article>
</section>

<section>
  <header><h3>时间选择</h3></header>
  <article>
    <div class="example">
      <input type="text" class="form-control form-time" placeholder=
      "选择或者输入一个时间：hh:mm">
    </div>
  </article>
</section>

<section>
  <header><h3>日期+时间选择</h3></header>
  <article>
    <div class="example">
      <input type="text" class="form-control form-datetime" placeholder=
      "选择或者输入一个日期+时间：yyyy-MM-dd hh:mm">
    </div>
  </article>
</section>

<section>
  <header><h3>禁用输入</h3></header>
  <article>
    <p>只允许用户选择一个日期或时间，而不允许自行编辑日期，只需要给<code>input</code>加上<code>readonly</code>属性。</p>
    <div class="example">
      <div class="row">
        <div class="col-md-4"><input type="text" class='form-control form-date' placeholder='选择或者输入一个日期：yyyy-MM-dd' readonly></div>
        <div class="col-md-4"><input type="text" class='form-control form-time' placeholder='选择或者输入一个时间：hh:mm' readonly></div>
        <div class="col-md-4"><input type="text" class='form-control form-datetime' placeholder='选择或者输入一个日期+时间：yyyy-MM-dd hh:mm' readonly></div>
      </div>
    </div>
  </article>
</section>

<section>
  <header><h3>使用输入框组</h3></header>
  <article>
    <p>输入框组可以添加额外的按钮来操作日期选择插件。</p>
    <p>按钮中的<code>.icon-remove</code>用来移除输入的日期。<code>.icon-th</code>,<code>.icon-calendar</code>,<code>.icon-time</code>用来激活日期选择框。</p>
    <div class="example">
      <div class="row">
        <div class="col-md-4">
          <div class="input-group date form-datetime" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
            <input class="form-control" size="16" type="text" value="" readonly>
            <span class="input-group-addon"><span class="icon-remove"></span></span>
            <span class="input-group-addon"><span class="icon-th"></span></span>
          </div>
        </div>
        <div class="col-md-4">
          <div class="input-group date form-date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
            <input class="form-control" size="16" type="text" value="" readonly>
            <span class="input-group-addon"><span class="icon-remove"></span></span>
            <span class="input-group-addon"><span class="icon-calendar"></span></span>
          </div>
        </div>
        <div class="col-md-4">
          <div class="input-group date form-time" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
            <input class="form-control" size="16" type="text" value="" readonly>
            <span class="input-group-addon"><span class="icon-remove"></span></span>
            <span class="input-group-addon"><span class="icon-time"></span></span>
          </div>
        </div>
      </div>
    </div>
  </article>
</section>

<section>
  <header><h3>用法</h3></header>
  <article>
    <pre><code>// 选择时间和日期
$(&quot;.form-datetime&quot;).datetimepicker(
{
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    forceParse: 0,
    showMeridian: 1,
    format: &quot;yyyy-mm-dd hh:ii&quot;
});

// 仅选择日期
$(&quot;.form-date&quot;).datetimepicker(
{
    language:  &quot;zh-CN&quot;,
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 2,
    minView: 2,
    forceParse: 0,
    format: &quot;yyyy-mm-dd&quot;
});

// 选择时间
$(&quot;.form-time&quot;).datetimepicker({
    language:  &quot;zh-CN&quot;,
    weekStart: 1,
    todayBtn:  1,
    autoclose: 1,
    todayHighlight: 1,
    startView: 1,
    minView: 0,
    maxView: 1,
    forceParse: 0,
    format: 'hh:ii'
});</code></pre>
  </article>
</section>

<link href="/dist/lib/datetimepicker/datetimepicker.min.css" rel="stylesheet">
<script>
function afterPageLoad() {
    $.getScript('/dist/lib/datetimepicker/datetimepicker.min.js', function() {
        if($.fn.datetimepicker)
        {
            $('#pageBody .form-datetime').datetimepicker(
            {
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                forceParse: 0,
                showMeridian: 1,
                format: 'yyyy-mm-dd hh:ii'
            });
            $('#pageBody .form-date').datetimepicker(
            {
                language:  'zh-CN',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0,
                format: 'yyyy-mm-dd'
            });
            $('#pageBody .form-time').datetimepicker({
                language:  'zh-CN',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 1,
                minView: 0,
                maxView: 1,
                forceParse: 0,
                format: 'hh:ii'
            });
        }
    });
}
</script>
